{extend name='table'}

{block name="button"}
<button data-modal='{:url("add")}' data-title="{:lang('添加')}" class='layui-btn layui-btn-sm layui-btn-primary'>添加</button>
<button data-form-export="{:url('index')}?type={$type|default=''}" data-title="{:lang('导 出')}" class='layui-btn layui-btn-sm layui-btn-primary'>导出</button>
<button class='layui-btn layui-btn-sm layui-btn-primary' data-file data-type="xlsx,xls" data-uptype='local' data-field="topic_excel">导入</button>
<!--{if auth("remove")}-->
<button data-table-id="DownloadTable" data-action='{:url("remove")}' data-rule="id#{id}" data-confirm="确定要删除选中的站点吗？" class='layui-btn layui-btn-sm layui-btn-primary'>{:lang('批量删除')}</button>
<!--{/if}-->

<!--{if auth('clearcache')}-->
<button data-table-id="DownloadTable" data-load='{:url("clearcache", ["all"=>1])}' data-confirm="确定要清空<font color='red'>所有站点辅种缓存</font>吗？" class='layui-btn layui-btn-sm layui-bg-orange'>清空所有缓存</button>
<!--{/if}-->
{/block}
{block name="content"}
<div class="think-box-shadow">
    <table id="DownloadTable" data-url="{:request()->url()}" data-target-search="form.form-search"></table>
</div>
{/block}
{block name='script'}
<script>
    $(function () {
        $('#DownloadTable').layTable({
            even: true, height: 'full',
            sort: {field: 'id', type: 'desc'},
            cols: [[
                {checkbox: true},
                // {field: 'id', title: 'ID', width: 80, sort: true, align: 'center'},
                {field: 'site_name', title: '站点名称',align: 'center'},
                {field: 'site_url', title: '站点地址',align: 'center'},
                {field: 'api_url', title: '接口地址',align: 'center'},
                {field: 'passkey', title: 'passkey秘钥',align: 'center'},
                {field: 'request_interval', title: '请求间隔(s)',align: 'center'},
                {field: 'upload_limit', title: '上传限速',align: 'center'},
                {field: 'download_limit', title: '下载限速', align: 'center'},
                {toolbar: '#toolbar', title: '{:lang("操作面板")}', align: 'center', minWidth: 90, width: '18%', fixed: 'right'}
            ]]
        });
    });
</script>

<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-sm" data-event-dbclick data-title="{:lang('编辑')}" data-modal='{:url("edit")}?id={{d.id}}'>{:lang('编 辑')}</a>
    <!--{if auth('remove')}-->
    <a data-action='{:url("remove")}' data-value="id#{{d.id}}" data-confirm="确认要删除这条记录吗？" class="layui-btn layui-btn-sm layui-btn-danger">{:lang('删 除')}</a>
    <!--{/if}-->
    <!--{if auth('clearcache')}-->
    <a data-action='{:url("clearcache")}' data-value="id#{{d.id}}" data-confirm="确认要清空辅种缓存吗？" class="layui-btn layui-btn-sm layui-btn-warm">{:lang('清空缓存')}</a>
    <!--{/if}-->
</script>
<script>
  require(['excel'], function (excel) {
      excel.bind(function (data) {

          // 设置表格内容
          data.forEach(function (item, index) {
              data[index] = [item.id,item.site_name, item.site_url,item.api_url,item.passkey,item.request_interval,item.upload_limit,item.download_limit];
          });

          // 设置表头内容
          data.unshift(['站点ID', '站点名称', '站点地址', '站点api地址', '站点passkey', '请求间隔', '上传限速值', '下载限速值']);

          // 可选，自动计算列序号
          var lastCol = layui.excel.numToTitle((function (count, idx) {
              for (idx in data[0]) count++;
              return count;
          })(0));

          // 可选，设置表头样式
          layui.excel.setExportCellStyle(data, 'A1:' + lastCol + '1', {
              s: {
                  font: {sz: 10, bold: true, color: {rgb: "FFFFFF"}, shadow: true},
                  fill: {bgColor: {indexed: 64}, fgColor: {rgb: "5FB878"}},
                  alignment: {vertical: 'center', horizontal: 'center'}
              }
          });

          // 可选，设置内容样式
          var style1 = {
              fill: {bgColor: {indexed: 64}, fgColor: {rgb: "EAEAEA"}},
              alignment: {vertical: 'center', horizontal: 'center'}
          }, style2 = {
              fill: {bgColor: {indexed: 64}, fgColor: {rgb: "FFFFFF"}},
              alignment: {vertical: 'center', horizontal: 'center'}
          };
          layui.excel.setExportCellStyle(data, 'A2:' + lastCol + data.length, {
              s: style1
          }, function (rawCell, newCell, row, config, currentRow, currentCol, fieldKey) {
              /* 判断并转换单元格数据为对象，以便初始化样式 */
              typeof rawCell !== 'object' && (rawCell = {v: rawCell});
              rawCell.s = Object.assign({}, style2, rawCell.s || {});
              return (currentRow % 2 === 0) ? newCell : rawCell;
          });

          // 可选，设置表格行宽高，需要设置最后的行或列宽高，否则部分不生效 ？？？
          var rowsC = {1: 40}, colsC = {A: 60, B: 100};
          rowsC[data.length] = 33, colsC[lastCol] = 160;
          this.options.extend = {
              '!rows': layui.excel.makeRowConfig(rowsC, 33), // 设置每行高度，默认 33
              '!cols': layui.excel.makeColConfig(colsC, 160) // 设置每行宽度，默认 160
          };
          return data;
      }, '站点配置');
  });
</script>
<script>
  window.form.render();
  $(function () {
      /*！文件上传过程事件处理 */
      $('[data-file]').on('upload.done', function (file, obj) {
          // obj.file 当前完成的文件对象
          // obj.data 当前文件上传后服务端返回的内容
          console.log(file);
          console.log(obj);
          /*! 提交数据并返回结果 */
          $.form.load('{:url("import")}', {file: obj.data.url}, 'post');
      })
  });
</script>
{/block}